<template>
  <div id="app">
    <div class="app_title">
      <h3 class="left"></h3>
      <div class="right">
        <span
          v-for="(item, index) in tabBar"
          :key="index"
          :class="tabNum == index ? 'selectIndex' : 'unselectIndex'"
          @click="jump(index, item.path)"
        >
          {{ item.name }}</span
        >
      </div>
    </div>
    <router-view></router-view>
    <div class="app_bottom">
      <div class="left">
        <div class="bottom_top">
          <div class="bottom_text_top">
            <span v-for="(item, index) in bottomBar" :key="index">
              {{ item.name }}</span
            >
          </div>
          <span style="margin-top: 20px"
            >------------------------------------------------------------------------------------------------------------------------------------------------------</span
          >
        </div>
        <div class="bottom_tom">
          <div style="margin-bottom: 10px">
            <span>粤ICP备2022008486号-1</span>
          </div>
          <div style="margin-bottom: 10px">
            <span style="margin-right: 150px"> 手 机：13724393381</span>
            <span> 邮 箱：540791310@qq.com</span>
          </div>
          <div>
            <span style="margin-right: 82px">
              网址：www.yifanshangplus.com</span
            >
            <span> 地 址：广东省深圳市南山区西丽街道万科云城设计公社B201</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="erwei">
          <img src="./assets/erwei.png" alt="" />
        </div>
        <span class="saoma">扫码关注</span>
      </div>
    </div>
    <!---移动端--->
    <div class="app_bottom_mobile">
      <div class="bottom_mobile_top">
        <div>
          <span
            v-for="(item, index) in bottomBar"
            :key="index"
            class="in_block"
          >
            {{ item.name }}
          </span>
        </div>
        <span style="margin-top: 5px"
          >- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        </span>
      </div>
      <div class="bottom_mobile_bottom">
        <div class="bottom_mobile_bottom_text">
          <span>粤ICP备2022008486号-1</span>
          <span>手 机：13724393381</span>
          <span>网 址：www.yifanshangplus.com</span>
          <span>邮 箱：540791310@qq.com</span>
          <span>地 址：广东省深圳市南山区西丽街道万科云城设计公社B201</span>
        </div>
        <div class="bottom_mobile_bottom_erwei">
          <div class="erwei">
            <img src="./assets/erwei.png" alt="" />
          </div>
          <span class="saoma">扫码关注</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const tabBar = [
  { name: "首页", path: "/" },
  { name: "抽赏系列", path: "/reward" },
  { name: "品牌代理", path: "/brand" },
  { name: "无限赏模式", path: "/infinite" },
];

const bottomBar = [
  { name: "首页", path: "/" },
  { name: "抽赏系列", path: "/reward" },
  { name: "品牌代理", path: "/brand" },
  { name: "无限赏模式", path: "/infinite" },
  { name: "主营产品", path: "/infinite" },
];

const tabNum = ref(0);

const jump = (index, path) => {
  tabNum.value = index;
  router.push({ path });
};
</script>

<style lang="less">
body {
  margin: 0;
}
.app_bottom_mobile {
  display: none;
}
.app_bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #fff;
  background: #333333;
  height: 220px;
  padding: 0 300px;
  font-size: 14px;
  margin-top: 210px;
  margin-bottom: 45px;
}
.app_bottom .left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  height: 100%;
}
.bottom_top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.bottom_text_top {
  padding-left: 20px;
}
.bottom_text_top span {
  margin-right: 20px;
}
.bottom_tom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center;
  color: #2c3e50; */
  /* margin-top: 60px; */
  background: #000;
  overflow-x: hidden;
}
.app_title {
  background: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  /* margin: 60px 0; */
  font-size: 20px;
  color: #fff;
  height: 120px;
  padding: 0 300px;
  .left {
    font-size: 22px;
    font-weight: 100;
  }
  .right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    span {
      cursor: pointer;
    }
    .selectIndex {
      margin-right: 60px;
      // border-bottom: 1px solid #fff;
      padding: 10px 0;
      background-image: url("./assets/yj.png");
      background-repeat: no-repeat;
      background-position: 50% 100%;
    }

    .unselectIndex {
      margin-right: 60px;
    }
  }
}

.app_bottom .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.app_bottom .right .saoma {
  display: flex;
  justify-content: center;
  margin-right: 0px;
  margin-top: 10px;
}

@media (max-width: 1500px) {
  .app_title {
    display: none;
  }
  .app_bottom {
    display: none;
  }
  .app_bottom_mobile {
    display: block;
    padding-bottom: 15px;
    background: #333333;
    .bottom_mobile_top {
      color: #fff;
      font-size: 12px;
      padding: 15px 20px 10px 20px;
      .in_block {
        display: inline-block;
        transform: scale(8/12);
        -webkit-transform-origin-x: 0;
      }
    }
    .bottom_mobile_bottom {
      color: #fff;
      padding: 0 20px;
      display: flex;
      // flex-direction: column;
      // align-items: flex-start;
      justify-content: space-between;
      align-items: flex-end;
      .bottom_mobile_bottom_text {
      opacity: 0.7;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        span {
          transform: scale(8/12);
          -webkit-transform-origin-x: 0;
        }
      }
      .bottom_mobile_bottom_erwei {
        .erwei {
          img {
            width: 70px;
            height: 70px;
          }
        }
        .saoma {
          display: inline-block;
          transform: scale(8/12);
          text-align: center;
        }
      }
    }
  }
}
</style>
